<template>
  <div class="babeerage-main">
    <div class="vue-danmaku">
      <div class="backg"></div>
      <vue-danmaku ref="danmaku"
        class="demo"
        :danmus="christmasWishs"
        :config="config"
        @inited="onInit"
        @mouseIn="onMouseIn"
        @mouseOut="onMouseOut">
      </vue-danmaku>
    </div>
    <div class="content-input">
      <div class="center title">
        {{ $t('christmas2019.chris60') }}
      </div>
      <div class="name">
        <input v-model.trim="inputName" type="text" maxlength="10" class="inputName" :placeholder="$t('christmas2019.chris4')"/>
      </div>
      <div class="text">
        <input v-model.trim="inputText" type="text" maxlength="60" class="inputText" :placeholder="$t('christmas2019.chris5')"/>
      </div>
      <!-- :disabled="disabled" -->
      <el-button class="button" @click="handleAddDanmu" v-loading="loading">
        {{ $t('christmas2019.chris6') }}
        <!-- <span v-if="disabled">{{ times }}s</span> -->
      </el-button>
    </div>
    <div class="tip">
      <p>{{ $t('christmas2019.chris7') }}</p>
      <p>{{ $t('christmas2019.chris8') }}</p>
      <p>{{ $t('christmas2019.chris9') }}</p>
      <p>{{ $t('christmas2019.chris10') }}</p>
      <!-- 折叠 -->
      <el-collapse-transition>
        <div v-show="isActive">
          <p>{{ $t('christmas2019.chris11') }}</p>
          <p>{{ $t('christmas2019.chris12') }}</p>
          <p>{{ $t('christmas2019.chris13') }}</p>
        </div>
      </el-collapse-transition>
      <div @click="isActive = !isActive" class="flexc arrowIcon">
        <div v-if="!isActive" class="flex">
          <span>{{ $t('christmas2019.chris58') }}</span>
          <i class="iconfont el-icon-arrow-down"></i>
        </div>
        <div v-else class="flex">
          <span>{{ $t('christmas2019.chris59') }}</span>
          <i class="iconfont el-icon-arrow-up"></i>
        </div>
      </div>
    </div>
    <!-- 超出代付次数提示-->
    <div v-if="tipsHot">
      <tips :text="$t('christmas2019.chris19')"
        :width="400"
        :showBtn = true
        @listenTips="(() => {tipsHot=false})" />
    </div>
    <!-- eos账号超出次数提示-->
    <div v-if="overnum">
      <tips :text="$t('christmas2019.chris20')"
        :text1="$t('christmas2019.chris21')"
        :width="400"
        :showBtn = true
        @listenTips="(() => {overnum=false})" />
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import VueDanmaku from '@/components/Baberrage/Main'
// import { danmus } from '@/components/Baberrage/testData.js'
import { EosModel } from '@/utils/eos/index'; // 兑换记录
import { authorized } from '@/utils/validate';
import Tips from '@/components/Tips'; // 弹出提示

export default {
  name: 'App',
  components: {
    VueDanmaku,
    Tips,
  },
  data() {
    return {
      config: {
        channels: 5, // 弹道
        loop: true, // 是否循环
        speed: 20, // 速度
        fontSize: 18, // 字体大小
      },
      inputText: '',
      inputName: '',
      // danmus: danmus, // 初始化数据
      christmasWishs: [], // 愿望列表
      noAccountWishCount: 0, // 无账号剩余数
      loading: false,
      tipsHot: false, // 活动火爆
      overnum: false, // 超过次数
      trxId: '', // trxId
      isActive: false,
      // timer: null,
      // disabled: false,
      times: 15,
    }
  },
  props: {
  },
  watch: {
  },
  created() {
  },
  mounted() {
    this.handleChristmasList('select');
  },
  beforeDestroy() {
    // if (this.timer) {
    //   clearInterval(this.timer)
    // }
  },
  methods: {
    onInit() {
      // this.$refs.danmaku.play()
    },
    onMouseIn() {
      // console.log('in')
    },
    onMouseOut() {
      // console.log('out')
    },
    play(type) {
      switch (type) {
        case 'play':
          this.$refs.danmaku.play()
          break
        case 'pause':
          this.$refs.danmaku.pause()
          break
        case 'stop':
          this.$refs.danmaku.stop()
          break
        case 'show':
          this.$refs.danmaku.show()
          break
        case 'hide':
          this.$refs.danmaku.hide()
          break
        case 'reset':
          this.$refs.danmaku.reset()
          break
        default: break
      }
    },
    
    handleAddDanmu() {
      if (!this.inputText) {
        this.$message.error(this.$t('christmas2019.chris5'));
        return;
      }
      if (this.inputText.length < 4) {
        this.$message.error(this.$t('christmas2019.chris70'));
        return;
      }
      if (!this.inputName) {
        this.inputName = this.$t('christmas2019.chris61');
      }
      // const scatter = this.$store.state.app.scatter;
      // if (scatter && scatter.identity) {
      //   if (scatter.chain !== 'eos') {
      //     this.$message.warning(this.$t('anniversary.plstoEos'));
      //     return;
      //   }
      // }
      this.handleCheckSensitiveWord(v => { // 判断愿望有无敏感词
        if (v === 'error') {
          return;
        }
        const scatter = this.$store.state.app.scatter;
        if (scatter && scatter.identity && scatter.chain === 'eos') { // 有账号登陆直接转账
          this.handleDrawInfo();
        } else { // 无账号调接口
          this.handleGetNoAccountWishCount(); // 获取有无次数
        }
      }); // 判断敏感词
    },
    // 提交接口数据
    handleSubmitData() {
      this.loading = true;
      const params = {
        nickname: this.inputName,
        wish: this.inputText
      }
      this.$http.post('/christmas/makeWish', params).then((res) => {
        if (res.code !== 0) {
          this.loading = false;
          this.$message.error(res.msg);
          return;
        }
        this.handleSuccess('type1');
      });
    },
    // 转账
    handleSubmitDatatransact() {
      const memo = {
        nickname: this.inputName,
        wish: this.inputText
      }
      const params = {
        quantity: `0.0001 EOS`,
        remarks: JSON.stringify(memo),
      }
      this.loading = true;
      EosModel.transactionChristmas(params, (res) => {
        if (res && res.processed) {
          this.handleSuccess('type2');
          return
        }
        this.loading = false;
        EosModel.handleScatterErrorBack(res)
      })
    },
    // 提交成功
    handleSuccess(val) {
      this.handleChristmasList('find', val);
    },
    // 获取最近100个愿望
    handleChristmasList(val, type) {
      // this.christmasWishs = [];
      this.$http.post('/christmas/getChristmasWishs').then((res) => {
        this.loading = false;
        if (res.code !== 0) {
          // this.$message.error(res.msg);
          return;
        }
        const wishs = res.christmasWishs;
        if (val === 'select') {
          wishs.forEach(v => {
            const vv = v;
            if (!vv.nickname) {
              vv.nickname = '匿名';
              vv.createTs = new Date(vv.createTs).getTime();
            }
          });
          this.christmasWishs = wishs.sort((a, b) => a.createTs - b.createTs);
          this.$refs.danmaku.play();
        } else {
          const params = {
            nickname: this.inputName,
            wish: this.inputText
          }
          if (type === 'type1') {
            this.trxId = wishs[0].trxId;
            // this.disabled = true;
            // this.timer = setInterval(() => {
            //   this.times -= 1;
            //   if (this.times === 0) {
            //     this.disabled = false;
            //     this.times = 15;
            //     clearInterval(this.timer);
            //   }
            // }, 1000);
          }
          if (type === 'type2') {
            const trxId = wishs.find(v => v.memo === this.inputText && v.account === this.$store.state.app.scatter.identity.accounts[0].name);
            if (trxId && trxId.trxId) {
              this.trxId = trxId.trxId;
            } else {
              this.trxId = wishs[0].trxId;
            }
          }
          this.loading = false;
          this.christmasWishs.push({
            nickname: params.nickname,
            memo: params.wish,
            createTs: new Date().getTime(),
            trxId: this.trxId,
            className: 'wishClass',
          })
          this.$message.success(this.$t('christmas2019.chris62'));
          this.inputText = '';
        }
      });
    },
    // 获取无账号剩余愿望
    handleGetNoAccountWishCount() {
      this.$http.post('/christmas/getNoAccountWishCount').then((res) => {
        if (res.code !== 0) {
          this.$message.error(res.msg);
          return;
        }
        this.noAccountWishCount = Number(res.noAccountWishCount);
        if (this.noAccountWishCount) {
          this.handleSubmitData();
          return;
        }
        this.tipsHot = true;
      });
    },
    // 判断敏感词
    handleCheckSensitiveWord(callback) {
      const txt = this.inputName + this.inputText;
      const params = {
        txt
      }
      this.$http.post('/christmas/checkSensitiveWord', params).then((res) => {
        if (res.code !== 0) {
          this.$message.error(res.msg);
          return;
        }
        if (res.result) {
          this.$message.error(this.$t('christmas2019.chris63'));
          callback('error')
          return;
        }
        callback('success');
      });
    },
    // 有账号获取次数限制
    handleDrawInfo() {
      this.$http.post('/christmas/getAccountDrawInfo').then((res) => {
        if (res.code === 401) {
          authorized(this, (code, result) => {
            if (code === 'error') { // 授权错误
              console.log(result); // eslint-disable-line
              return;
            }
            this.handleDrawInfo();
          });
          return;
        }
        if (res.code !== 0) {
          this.$message.error(res.msg);
          return;
        }
        if (res.remainWishCount) {
          this.handleSubmitDatatransact();
          return;
        }
        this.overnum = true;
      });
    },
  }
}
/* eslint-disable */
</script>

<style lang="scss">
$-btn-color: #663C04;
$-btn-back: #F1C89D;

.babeerage-main {
  // margin-top: -40px;

  .content-input {
    background: #323338;
    width: 900px;
    margin: 0 auto;
    padding: 0 15px 20px;
    // height: 60px;
    // display: flex;
    // justify-content: center;

    input {
      display: block;
      width: 100%;
      padding: 10px;
      background: #2A2B2F;
      outline:none;
      border:none;
      margin-bottom: 10px;
      border-radius: 5px;
      color: #fff;
      padding-left: 40px;
      height: 60px;
    }

    .name {
      position: relative;

      &::after {
        content: '';
        display: block;
        position: absolute;
        width: 20px;
        height: 29px;
        top: 50%;
        left: 10px;
        transform: translateY(-50%);
        background: url('../../../assets/img/activity/christmas/name.png') no-repeat;
        background-size: 100% 100%;
      }
    }

    .text {
      position: relative;

      &::after {
        content: '';
        display: block;
        position: absolute;
        width: 20px;
        height: 25px;
        top: 50%;
        left: 10px;
        transform: translateY(-50%);
        background: url('../../../assets/img/activity/christmas/text.png') no-repeat;
        background-size: 100% 100%;
      }
    }

    .button {
      display: block;
      width: 258px;
      line-height: 258px;
      line-height: 44px;
      background: rgb(90, 154, 214);
      color: #663C04;
      background: #F1C89D;
      text-align: center;
      border-radius: 5px;
      margin: 20px auto 0;
      // cursor: pointer;
      padding: 0 !important;
    }

    .title {
      font-size: 21px;
      padding: 20px 0;
      color: #F1C89D;
    }
  }

  .tip {
    width: 800px;
    margin: 40px auto 0;
    color: #F1C89D;
    min-height: 280px;

    p {
      margin-bottom: 8px;
    }
  }

  .arrowIcon {
    color: #bfbfbf;
    div {
      cursor: pointer;
    }

    i {
      margin-left: 3px;
      font-size: 24px;
    }
  }
}

.vue-danmaku {
  margin-top: -60px;
  position: relative;
  height: 500px;
  width: 100%;
  padding-top: 20px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  // background: linear-gradient(45deg, #6363e2, #101730);
  // background: transparent;
  

  .backg {
    width: 600px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin:auto;
    background: url('../../../assets/img/activity/christmas/treeFlash.png') center no-repeat;
    background-size: cover;
  }

  .operation {
    margin-top: 20px;
    color: #fff;
    position: absolute;
    .btn {
      color: #000;
      background: #fff;
      border: none;
      padding: 6px 16px;
      border-radius: 5px;
      outline: none;
      cursor: pointer;
      transition: all 0.3s;
      &:hover {
        background-color: #f3f7fa;
      }
      &:active {
        background-color: #fff;
      }
    }
    .ipt {
      padding: 6px 16px;
      border-radius: 5px;
      outline: none;
      border: none;
    }
  }
  .github-corner:hover .octo-arm {
    animation: octocat-wave 560ms ease-in-out;
  }

  @keyframes octocat-wave {
    0%,
    100% {
      transform: rotate(0);
    }
    20%,
    60% {
      transform: rotate(-25deg);
    }
    40%,
    80% {
      transform: rotate(10deg);
    }
  }

  @media (max-width: 500px) {
    .github-corner:hover .octo-arm {
      animation: none;
    }
    .github-corner .octo-arm {
      animation: octocat-wave 560ms ease-in-out;
    }
  }
}
</style>
